<template>
  <div class="questions-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h1>题库管理</h1>
        <p>管理考试题目，构建题库体系</p>
      </div>
      <div class="header-right">
        <el-button @click="showImportDialog = true">
          <i class="fas fa-upload"></i>
          批量导入
        </el-button>
        <el-button type="primary" @click="showCreateDialog = true">
          <i class="fas fa-plus"></i>
          创建题目
        </el-button>
      </div>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-left">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索题目内容..."
          :prefix-icon="Search"
          clearable
          @input="handleSearch"
        />
        <el-select v-model="typeFilter" placeholder="题目类型" clearable>
          <el-option label="全部类型" value="" />
          <el-option label="单选题" value="single" />
          <el-option label="多选题" value="multiple" />
          <el-option label="判断题" value="boolean" />
          <el-option label="填空题" value="fill" />
          <el-option label="简答题" value="essay" />
        </el-select>
        <el-select v-model="difficultyFilter" placeholder="难度等级" clearable>
          <el-option label="全部难度" value="" />
          <el-option label="简单" value="easy" />
          <el-option label="中等" value="medium" />
          <el-option label="困难" value="hard" />
        </el-select>
        <el-select v-model="courseFilter" placeholder="课程" clearable>
          <el-option label="全部课程" value="" />
          <el-option 
            v-for="course in courses" 
            :key="course.courseId" 
            :label="course.courseName" 
            :value="course.courseId" 
          />
        </el-select>
      </div>
      <div class="search-right">
        <el-button :icon="Refresh" @click="loadQuestions">刷新</el-button>
      </div>
    </div>
    
    <!-- 题目列表 -->
    <div class="questions-list">
      <div 
        v-for="question in filteredQuestions" 
        :key="question.id" 
        class="question-card"
      >
        <div class="question-header">
          <div class="question-meta">
            <el-tag 
              :type="getTypeTagType(question.type)"
              size="small"
            >
              {{ getTypeLabel(question.type) }}
            </el-tag>
            <el-tag 
              :type="getDifficultyTagType(question.difficulty)"
              size="small"
            >
              {{ getDifficultyLabel(question.difficulty) }}
            </el-tag>

          </div>
          <el-dropdown @command="(command) => handleQuestionAction(command, question)">
            <el-button circle :icon="MoreFilled" size="small" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="edit">
                  <i class="fas fa-edit"></i>
                  编辑
                </el-dropdown-item>
                <el-dropdown-item command="preview">
                  <i class="fas fa-eye"></i>
                  预览
                </el-dropdown-item>
                <el-dropdown-item command="duplicate">
                  <i class="fas fa-copy"></i>
                  复制
                </el-dropdown-item>
                <el-dropdown-item divided command="delete" style="color: #f56c6c">
                  <i class="fas fa-trash"></i>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        
        <div class="question-content">
          <div class="question-text" v-html="question.content"></div>
          
          <!-- 选择题选项 -->
          <div v-if="['single', 'multiple'].includes(question.type)" class="question-options">
            <div 
              v-for="(option, index) in question.options" 
              :key="index" 
              class="option-item"
              :class="{ correct: question.correctAnswers.includes(index) }"
            >
              <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
              <span class="option-text">{{ option }}</span>
              <i v-if="question.correctAnswers.includes(index)" class="fas fa-check correct-icon"></i>
            </div>
          </div>
          
          <!-- 判断题答案 -->
          <div v-else-if="question.type === 'boolean'" class="boolean-answer">
            <span class="answer-label">正确答案：</span>
            <el-tag :type="question.correctAnswer ? 'success' : 'danger'">
              {{ question.correctAnswer ? '正确' : '错误' }}
            </el-tag>
          </div>
          
          <!-- 填空题答案 -->
          <div v-else-if="question.type === 'fill'" class="fill-answers">
            <span class="answer-label">参考答案：</span>
            <div class="answer-list">
              <el-tag 
                v-for="(answer, index) in question.correctAnswers" 
                :key="index"
                class="answer-tag"
              >
                {{ answer }}
              </el-tag>
            </div>
          </div>
          
          <!-- 简答题答案 -->
          <div v-else-if="question.type === 'essay'" class="essay-answer">
            <span class="answer-label">参考答案：</span>
            <div class="answer-content">{{ question.referenceAnswer }}</div>
          </div>
        </div>
        
        <div class="question-footer">
          <div class="question-stats">
            <span class="stat-item">
              <i class="fas fa-eye"></i>
              使用 {{ question.usageCount }} 次
            </span>
            <span class="stat-item">
              <i class="fas fa-calendar"></i>
              {{ formatDate(question.createdAt) }}
            </span>
            <span class="stat-item">
              <i class="fas fa-user"></i>
              {{ question.creator }}
            </span>
          </div>
          <div class="question-actions">
            <el-button size="small" @click="previewQuestion(question)">
              预览
            </el-button>
            <el-button size="small" type="primary" @click="editQuestion(question)">
              编辑
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalQuestions"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredQuestions.length === 0" class="empty-state">
      <i class="fas fa-question-circle"></i>
      <h3>暂无题目</h3>
      <p>创建第一道题目来开始构建您的题库</p>
      <el-button type="primary" @click="showCreateDialog = true">
        创建题目
      </el-button>
    </div>
    
    <!-- 创建/编辑题目对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      :title="editingQuestion ? '编辑题目' : '创建题目'"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="questionFormRef"
        :model="questionForm"
        :rules="questionFormRules"
        label-width="100px"
      >
        <el-form-item label="题目类型" prop="type">
          <el-radio-group v-model="questionForm.type" @change="handleTypeChange">
            <el-radio label="single">单选题</el-radio>
            <el-radio label="multiple">多选题</el-radio>
            <el-radio label="boolean">判断题</el-radio>
            <el-radio label="fill">填空题</el-radio>
            <el-radio label="essay">简答题</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="课程" prop="courseId">
          <el-select v-model="questionForm.courseId" placeholder="请选择课程">
            <el-option 
              v-for="course in courses" 
              :key="course.courseId" 
              :label="course.courseName" 
              :value="course.courseId.toString()" 
            />
          </el-select>
        </el-form-item>
        

        
        <el-form-item label="难度等级" prop="difficulty">
          <el-radio-group v-model="questionForm.difficulty">
            <el-radio label="easy">简单</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="hard">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="题目内容" prop="content">
          <el-input
            v-model="questionForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入题目内容"
          />
        </el-form-item>
        
        <!-- 选择题选项 -->
        <template v-if="['single', 'multiple'].includes(questionForm.type)">
          <el-form-item label="选项设置">
            <div class="options-editor">
              <div 
                v-for="(option, index) in questionForm.options" 
                :key="index" 
                class="option-editor"
              >
                <el-checkbox 
                  v-if="questionForm.type === 'multiple'"
                  v-model="questionForm.correctAnswers"
                  :label="index"
                >
                </el-checkbox>
                <el-radio 
                  v-else
                  v-model="questionForm.correctAnswers[0]"
                  :label="index"
                >
                </el-radio>
                <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                <el-input 
                  v-model="questionForm.options[index]"
                  placeholder="请输入选项内容"
                />
                <el-button 
                  v-if="questionForm.options.length > 2"
                  :icon="Delete"
                  size="small"
                  @click="removeOption(index)"
                />
              </div>
              <el-button 
                v-if="questionForm.options.length < 6"
                type="dashed"
                @click="addOption"
              >
                <i class="fas fa-plus"></i>
                添加选项
              </el-button>
            </div>
          </el-form-item>
        </template>
        
        <!-- 判断题答案 -->
        <el-form-item v-if="questionForm.type === 'boolean'" label="正确答案" prop="correctAnswer">
          <el-radio-group v-model="questionForm.correctAnswer">
            <el-radio :label="true">正确</el-radio>
            <el-radio :label="false">错误</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 填空题答案 -->
        <el-form-item v-if="questionForm.type === 'fill'" label="参考答案">
          <div class="fill-answers-editor">
            <div 
              v-for="(answer, index) in questionForm.correctAnswers" 
              :key="index" 
              class="answer-editor"
            >
              <el-input 
                v-model="questionForm.correctAnswers[index]"
                placeholder="请输入参考答案"
              />
              <el-button 
                v-if="questionForm.correctAnswers.length > 1"
                :icon="Delete"
                size="small"
                @click="removeAnswer(index)"
              />
            </div>
            <el-button type="dashed" @click="addAnswer">
              <i class="fas fa-plus"></i>
              添加答案
            </el-button>
          </div>
        </el-form-item>
        
        <!-- 简答题答案 -->
        <el-form-item v-if="questionForm.type === 'essay'" label="参考答案" prop="referenceAnswer">
          <el-input
            v-model="questionForm.referenceAnswer"
            type="textarea"
            :rows="4"
            placeholder="请输入参考答案"
          />
        </el-form-item>
        
        <el-form-item label="解析说明">
          <el-input
            v-model="questionForm.explanation"
            type="textarea"
            :rows="3"
            placeholder="请输入题目解析（可选）"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button @click="previewQuestionForm">预览</el-button>
        <el-button type="primary" @click="handleSaveQuestion" :loading="saving">
          {{ editingQuestion ? '保存' : '创建' }}
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 题目预览对话框 -->
    <el-dialog
      v-model="showPreviewDialog"
      title="题目预览"
      width="600px"
    >
      <div class="question-preview">
        <div class="preview-header">
          <el-tag :type="getTypeTagType(previewQuestion?.type)">
            {{ getTypeLabel(previewQuestion?.type) }}
          </el-tag>
          <el-tag :type="getDifficultyTagType(previewQuestion?.difficulty)">
            {{ getDifficultyLabel(previewQuestion?.difficulty) }}
          </el-tag>
        </div>
        
        <div class="preview-content">
          <div class="question-text" v-html="previewQuestion?.content"></div>
          
          <!-- 选择题选项预览 -->
          <div v-if="['single', 'multiple'].includes(previewQuestion?.type)" class="preview-options">
            <div 
              v-for="(option, index) in previewQuestion?.options" 
              :key="index" 
              class="preview-option"
            >
              <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
              <span class="option-text">{{ option }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 批量导入对话框 -->
    <el-dialog
      v-model="showImportDialog"
      title="批量导入题目"
      width="600px"
    >
      <div class="import-section">
        <el-upload
          ref="uploadRef"
          :auto-upload="false"
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          accept=".xlsx,.xls,.csv"
          drag
        >
          <i class="fas fa-upload"></i>
          <div class="upload-text">
            <p>将文件拖到此处，或<em>点击上传</em></p>
            <p class="upload-tip">支持 Excel (.xlsx, .xls) 和 CSV 格式</p>
          </div>
        </el-upload>
        
        <div class="import-tips">
          <h4>导入说明：</h4>
          <ul>
            <li>请使用标准模板格式</li>
            <li>题目类型：single(单选)、multiple(多选)、boolean(判断)、fill(填空)、essay(简答)</li>
            <li>难度等级：easy(简单)、medium(中等)、hard(困难)</li>
          </ul>
          <el-button type="primary" link @click="downloadTemplate">
            下载模板文件
          </el-button>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showImportDialog = false">取消</el-button>
        <el-button type="primary" @click="handleImport" :loading="importing">
          开始导入
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, MoreFilled, Delete } from '@element-plus/icons-vue'
import { 
  getQuestionList, 
  createQuestion, 
  updateQuestion, 
  deleteQuestion
} from '@/api/rbac/admin'
import { getMyCourses } from '@/api/course-management'

const searchKeyword = ref('')
const typeFilter = ref('')
const difficultyFilter = ref('')
const courseFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalQuestions = ref(0)
const showCreateDialog = ref(false)
const showPreviewDialog = ref(false)
const showImportDialog = ref(false)
const saving = ref(false)
const importing = ref(false)
const editingQuestion = ref(null)
const previewQuestion = ref(null)

const questionFormRef = ref()
const uploadRef = ref()

const questions = ref([])
const courses = ref([])

const questionForm = ref({
  type: 'single',
  courseId: '',
  subject: '',
  difficulty: 'medium',
  content: '',
  options: ['', ''],
  correctAnswers: [],
  correctAnswer: true,
  referenceAnswer: '',
  explanation: ''
})

const questionFormRules = {
  type: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
  courseId: [{ required: true, message: '请选择课程', trigger: 'change' }],
  difficulty: [{ required: true, message: '请选择难度等级', trigger: 'change' }],
  content: [{ required: true, message: '请输入题目内容', trigger: 'blur' }]
}

const filteredQuestions = computed(() => {
  let result = questions.value
  
  if (searchKeyword.value) {
    result = result.filter(q => 
      q.content.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  if (typeFilter.value) {
    result = result.filter(q => q.type === typeFilter.value)
  }
  
  if (difficultyFilter.value) {
    result = result.filter(q => q.difficulty === difficultyFilter.value)
  }
  
  if (courseFilter.value) {
    result = result.filter(q => q.courseId === courseFilter.value)
  }
  
  return result
})

const getTypeLabel = (type) => {
  const labels = {
    single: '单选题',
    multiple: '多选题',
    boolean: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return labels[type] || type
}

const getTypeTagType = (type) => {
  const types = {
    single: 'primary',
    multiple: 'success',
    boolean: 'warning',
    fill: 'info',
    essay: 'danger'
  }
  return types[type] || 'primary'
}

const getDifficultyLabel = (difficulty) => {
  const labels = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return labels[difficulty] || difficulty
}

const getDifficultyTagType = (difficulty) => {
  const types = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return types[difficulty] || 'primary'
}

// 题目类型映射函数
const mapQuestionType = (backendType) => {
  const typeMap = {
    'single_choice': 'single',
    'multiple_choice': 'multiple',
    'true_false': 'boolean',
    'fill_in': 'fill',
    'subjective': 'essay'
  }
  return typeMap[backendType] || backendType
}

const mapToBackendType = (frontendType) => {
  const typeMap = {
    'single': 'single_choice',
    'multiple': 'multiple_choice',
    'boolean': 'true_false',
    'fill': 'fill_in',
    'essay': 'subjective'
  }
  return typeMap[frontendType] || frontendType
}

const loadQuestions = async () => {
  try {
    const response = await getQuestionList()
    if (response.code === 200 && response.data) {
      // 将后端数据格式转换为前端需要的格式
      questions.value = response.data.map(question => ({
        id: question.questionId,
        type: mapQuestionType(question.questionType),
        courseId: question.courseId,
        subject: question.subject || '',
        difficulty: question.difficulty,
        content: question.content,
        options: question.options ? question.options.map(opt => opt.content) : [],
        correctAnswers: question.options ? 
          question.options.filter(opt => opt.isCorrect).map(opt => opt.optionOrder - 1) : [],
        correctAnswer: question.questionType === 'true_false' ? 
          (question.referenceAnswer === 'true' || question.referenceAnswer === '正确') : true,
        referenceAnswer: question.referenceAnswer || '',
        explanation: '',
        usageCount: 0,
        creator: `用户${question.createdBy}`,
        createdAt: question.createdAt ? question.createdAt.split('T')[0] : ''
      }))
      totalQuestions.value = questions.value.length
    }
  } catch (error) {
    console.error('加载题目列表失败:', error)
    ElMessage.error('加载题目列表失败')
  }
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleSizeChange = (size) => {
  pageSize.value = size
  loadQuestions()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  loadQuestions()
}

const handleQuestionAction = async (command, question) => {
  switch (command) {
    case 'edit':
      editQuestion(question)
      break
    case 'preview':
      previewQuestionDetail(question)
      break
    case 'duplicate':
      await duplicateQuestion(question)
      break
    case 'delete':
      await deleteQuestionConfirm(question)
      break
  }
}

const editQuestion = (question) => {
  editingQuestion.value = question
  // 根据课程数据映射courseId，确保能正确显示课程名称
  const matchedCourse = courses.value.find(course => course.courseId === question.courseId)
  questionForm.value = {
    type: question.type,
    courseId: matchedCourse ? matchedCourse.courseId.toString() : (question.courseId ? question.courseId.toString() : ''),
    subject: question.subject || '',
    difficulty: question.difficulty,
    content: question.content,
    options: question.options ? [...question.options] : ['', ''],
    correctAnswers: question.correctAnswers ? [...question.correctAnswers] : [],
    correctAnswer: question.correctAnswer ?? true,
    referenceAnswer: question.referenceAnswer || '',
    explanation: question.explanation || ''
  }
  showCreateDialog.value = true
}

const previewQuestionDetail = (question) => {
  previewQuestion.value = question
  showPreviewDialog.value = true
}

const duplicateQuestion = async (question) => {
  try {
    const newQuestion = {
      ...question,
      id: Date.now(),
      content: question.content + ' (副本)',
      usageCount: 0,
      createdAt: new Date().toISOString().split('T')[0]
    }
    questions.value.unshift(newQuestion)
    ElMessage.success('题目复制成功')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

const deleteQuestionConfirm = async (question) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除这道题目吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await deleteQuestion(question.id)
    if (response.code === 200) {
      ElMessage.success('题目删除成功')
      await loadQuestions() // 重新加载题目列表
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除题目失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const handleTypeChange = () => {
  // 重置相关字段
  if (['single', 'multiple'].includes(questionForm.value.type)) {
    questionForm.value.options = ['', '']
    questionForm.value.correctAnswers = []
  }
}

const addOption = () => {
  questionForm.value.options.push('')
}

const removeOption = (index) => {
  questionForm.value.options.splice(index, 1)
  // 更新正确答案索引
  questionForm.value.correctAnswers = questionForm.value.correctAnswers
    .filter(i => i !== index)
    .map(i => i > index ? i - 1 : i)
}

const addAnswer = () => {
  questionForm.value.correctAnswers.push('')
}

const removeAnswer = (index) => {
  questionForm.value.correctAnswers.splice(index, 1)
}

const previewQuestionForm = () => {
  previewQuestion.value = { ...questionForm.value }
  showPreviewDialog.value = true
}

const handleSaveQuestion = async () => {
  try {
    await questionFormRef.value.validate()
    saving.value = true
    
    // 构建后端需要的数据格式
    const questionData = {
      courseId: parseInt(questionForm.value.courseId),
      content: questionForm.value.content,
      questionType: mapToBackendType(questionForm.value.type),
      referenceAnswer: questionForm.value.type === 'boolean' ? 
        (questionForm.value.correctAnswer ? '正确' : '错误') : 
        questionForm.value.referenceAnswer,
      subject: questionForm.value.subject,
      difficulty: questionForm.value.difficulty
    }
    
    // 如果是选择题，添加选项
    if (['single', 'multiple'].includes(questionForm.value.type)) {
      questionData.options = questionForm.value.options.map((option, index) => ({
        content: option,
        isCorrect: questionForm.value.correctAnswers.includes(index),
        optionOrder: index + 1
      }))
    }
    
    if (editingQuestion.value) {
      const response = await updateQuestion(editingQuestion.value.id, questionData)
      if (response.code === 200) {
        ElMessage.success('题目更新成功')
        await loadQuestions() // 重新加载题目列表
      } else {
        ElMessage.error(response.message || '更新失败')
      }
    } else {
      const response = await createQuestion(questionData)
      if (response.code === 200) {
        ElMessage.success('题目创建成功')
        await loadQuestions() // 重新加载题目列表
      } else {
        ElMessage.error(response.message || '创建失败')
      }
    }
    
    showCreateDialog.value = false
    resetQuestionForm()
  } catch (error) {
    console.error('保存题目失败:', error)
    ElMessage.error(editingQuestion.value ? '更新失败' : '创建失败')
  } finally {
    saving.value = false
  }
}

const resetQuestionForm = () => {
  questionForm.value = {
    type: 'single',
    courseId: '',
    subject: '',
    difficulty: 'medium',
    content: '',
    options: ['', ''],
    correctAnswers: [],
    correctAnswer: true,
    referenceAnswer: '',
    explanation: ''
  }
  editingQuestion.value = null
  questionFormRef.value?.resetFields()
}

const handleFileChange = (file) => {
  // 处理文件选择
}

const beforeUpload = (file) => {
  const isValidType = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 
                      'application/vnd.ms-excel', 
                      'text/csv'].includes(file.type)
  if (!isValidType) {
    ElMessage.error('只支持 Excel 和 CSV 格式文件')
    return false
  }
  return true
}

const handleImport = async () => {
  try {
    importing.value = true
    // 处理导入逻辑
    ElMessage.success('导入成功')
    showImportDialog.value = false
  } catch (error) {
    ElMessage.error('导入失败')
  } finally {
    importing.value = false
  }
}

const downloadTemplate = () => {
  // 下载模板文件
  const link = document.createElement('a')
  link.href = '/templates/question-template.xlsx'
  link.download = '题目导入模板.xlsx'
  link.click()
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

// 加载课程列表
const loadCourses = async () => {
  try {
    const response = await getMyCourses()
    if (response.code === 200 && response.data) {
      courses.value = response.data
    } else {
      ElMessage.warning('获取课程列表失败')
    }
  } catch (error) {
    console.error('加载课程列表失败:', error)
    ElMessage.error('加载课程列表失败')
  }
}

onMounted(async () => {
  await loadCourses() // 先加载课程列表
  loadQuestions()
})
</script>

<style lang="scss" scoped>
.questions-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  
  .header-left {
    h1 {
      font-size: 28px;
      font-weight: 700;
      color: var(--neutral-700);
      margin-bottom: 8px;
    }
    
    p {
      color: var(--neutral-500);
      font-size: 16px;
    }
  }
  
  .header-right {
    display: flex;
    gap: 12px;
  }
}

.search-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .search-left {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    
    .el-input {
      width: 250px;
    }
    
    .el-select {
      width: 120px;
    }
  }
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.question-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  
  .question-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}

.question-content {
  margin-bottom: 20px;
  
  .question-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin-bottom: 16px;
  }
}

.question-options {
  .option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: var(--neutral-50);
    position: relative;
    
    &.correct {
      background: rgba(22, 163, 74, 0.1);
      border: 1px solid rgba(22, 163, 74, 0.2);
    }
    
    .option-label {
      font-weight: 600;
      color: var(--neutral-600);
      min-width: 20px;
    }
    
    .option-text {
      flex: 1;
      color: var(--neutral-700);
    }
    
    .correct-icon {
      color: var(--success-color);
    }
  }
}

.boolean-answer,
.fill-answers,
.essay-answer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  
  .answer-label {
    font-weight: 600;
    color: var(--neutral-600);
    white-space: nowrap;
  }
  
  .answer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .answer-content {
    flex: 1;
    padding: 8px 12px;
    background: var(--neutral-50);
    border-radius: 6px;
    color: var(--neutral-700);
    line-height: 1.5;
  }
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-200);
  
  .question-stats {
    display: flex;
    gap: 16px;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      color: var(--neutral-500);
      
      i {
        color: var(--neutral-400);
      }
    }
  }
  
  .question-actions {
    display: flex;
    gap: 8px;
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  
  i {
    font-size: 64px;
    color: var(--neutral-300);
    margin-bottom: 24px;
  }
  
  h3 {
    font-size: 20px;
    color: var(--neutral-500);
    margin-bottom: 12px;
  }
  
  p {
    color: var(--neutral-400);
    margin-bottom: 24px;
  }
}

.options-editor {
  width: 100%;
  
  .option-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    
    .option-label {
      font-weight: 600;
      color: var(--neutral-600);
      min-width: 20px;
    }
    
    .el-input {
      flex: 1;
    }
  }
}

.fill-answers-editor {
  width: 100%;
  
  .answer-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    
    .el-input {
      flex: 1;
    }
  }
}

.question-preview {
  .preview-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
  }
  
  .preview-content {
    .question-text {
      font-size: 16px;
      line-height: 1.6;
      color: var(--neutral-700);
      margin-bottom: 16px;
    }
    
    .preview-options {
      .preview-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 8px;
        border-radius: 6px;
        background: var(--neutral-50);
        
        .option-label {
          font-weight: 600;
          color: var(--neutral-600);
          min-width: 20px;
        }
        
        .option-text {
          color: var(--neutral-700);
        }
      }
    }
  }
}

.import-section {
  .upload-text {
    text-align: center;
    margin-top: 16px;
    
    p {
      margin: 8px 0;
      
      &.upload-tip {
        font-size: 12px;
        color: var(--neutral-400);
      }
    }
    
    em {
      color: var(--primary-color);
      font-style: normal;
    }
  }
  
  .import-tips {
    margin-top: 24px;
    padding: 16px;
    background: var(--neutral-50);
    border-radius: 8px;
    
    h4 {
      margin-bottom: 12px;
      color: var(--neutral-700);
    }
    
    ul {
      margin-bottom: 12px;
      padding-left: 20px;
      
      li {
        margin-bottom: 4px;
        font-size: 13px;
        color: var(--neutral-600);
      }
    }
  }
}

@media (max-width: 768px) {
  .search-section {
    .search-left {
      flex-direction: column;
      width: 100%;
      
      .el-input,
      .el-select {
        width: 100%;
      }
    }
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    
    .header-right {
      justify-content: flex-start;
    }
  }
  
  .question-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>